<template>
  <div class="login">
    <div class="login-box">
      <van-nav-bar @click-right="goPage('Home')">
        <template #left>
          <div class="left-text">
            <div class="logo">
              <van-image
                round
                width="36px"
                height="36px"
                :src="require('../assets/images/timg.jpg')"
              />
            </div>
            <div class="logo-title">Luckin Coffee</div>
          </div>
        </template>
        <template #right>
          <div class="close-box">去逛一逛</div>
        </template>
      </van-nav-bar>

      <div class="login-form">
        <div class="title">欢迎回来!</div>
        <div class="en-title">Please login to your accounts</div>

        <div class="login-form-box">
          <van-form>
            <van-field
              label="手机号"
              placeholder="手机号"
              v-model="userLoginInfo.phone"
            />
            <van-field
              :type="isPassword ? 'password' : 'text'"
              label="密码"
              placeholder="密码"
              v-model="userLoginInfo.password"
              :right-icon="isPassword ? 'closed-eye' : 'eye-o'"
              @click-right-icon="viewPassword"
            />
            <div class="clearfix forgot">
              <span class="fr" @click="goPage('Forgot')">忘记密码?</span>
            </div>
            <div class="login-btn">
              <van-button
                round
                block
                color="#0C34BA"
                native-type="submit"
                @click="login"
                >登&nbsp;&nbsp;录</van-button
              >
            </div>
            <div class="login-btn">
              <van-button round block type="default" @click="showPopup"
                >注&nbsp;&nbsp;册</van-button
              >
            </div>
          </van-form>

          <div class="login-mask">
            <van-popup
              closeable
              v-model="show"
              position="bottom"
              :style="{ height: '60%' }"
            >
              <div class="login-maskbottom">
                <div class="login-mask-nav">
                  <van-nav-bar />
                </div>

                <!-- 注册 -->
                <div class="login-title">注册</div>

                <div class="login-mask-field">
                  <van-field
                    v-model="userRegisterInfo.phone"
                    label="手机号 中国 (+86)"
                    placeholder="11位手机号"
                  />
                  <van-field
                    v-model="userRegisterInfo.nickName"
                    label="昵称"
                    placeholder="1-10位昵称"
                  />
                  <van-field
                    :type="isPassword ? 'password' : 'text'"
                    v-model="userRegisterInfo.password"
                    label="设置密码"
                    placeholder="6-16位密码且以字母开头"
                    :right-icon="isPassword ? 'closed-eye' : 'eye-o'"
                    @click-right-icon="viewPassword"
                  />
                  <van-field
                    :type="isPassword ? 'password' : 'text'"
                    v-model="userRegisterInfo.lastpassword"
                    label="确认密码"
                    placeholder="请再确认多一次密码"
                    :right-icon="isPassword ? 'closed-eye' : 'eye-o'"
                    @click-right-icon="viewPassword"
                  />
                </div>

                <div class="login-mask-btn login-btn">
                  <van-button
                    round
                    block
                    color="#0C34BA"
                    native-type="submit"
                    @click="register"
                    >注册</van-button
                  >
                </div>
              </div>
            </van-popup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/login.less";
// import { Toast } from "vant";
import { validForm } from "../assets/js/validForm";
import { utils } from "../assets/js/utils";

export default {
  data() {
    return {
      userLoginInfo: {
        phone: "",
        password: "",
      },
      userRegisterInfo: {
        phone: "",
        nickName: "",
        password: "",
        lastpassword: "",
      },
      isPassword: true,
      // isRegister: false,

      show: false,
    };
  },

  methods: {
    goPage(name) {
      this.$router.push({ name });
    },

    //查看密码
    viewPassword() {
      console.log("a");
      this.isPassword = !this.isPassword;
    },

    //遮罩层
    showPopup() {
      this.show = true;
    },


    //注册
    register() {
      //获取用户注册信息
      let userInfo = this.userRegisterInfo;
      console.log("userInfo===>", userInfo);

      //验证注册表单
      let o = {
        phone: {
          value: userInfo.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "手机号格式不正确",
        },
        nickName: {
          value: userInfo.nickName,
          reg: /^[\w\u4e00-\u9fa5]{1,10}$/,
          errorMsg: "呢称格式不正确",
        },
        password: {
          value: userInfo.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码格式不正确",
        },
      };

      if (!validForm.valid(o)) {
        //验证不通过
        return;
      }

      if (
        this.userRegisterInfo.password != this.userRegisterInfo.lastpassword
      ) {
        //两次密码不合
        this.$notify({
          type: "warning",
          message: "两次密码输入的不一致,请再次确认!"
        });
        return;
      }

      //发送请求
      //开启加载提示
      this.$toast.loading({
        message: "加载中...",

        //防止穿透
        forbidClick: true,

        //显示时间,如果时间为0 则不会自动关闭
        duration: 0,

        loadingType: "spinner",
      });

      //系列化参数
      //复制对象
      let info = Object.assign({}, userInfo);
      info.appkey = this.appkey;

      let data = utils.queryString(info);
      console.log("data ==> ", data);

      this.axios({
        method: "POST",
        url: "/register",
        data,
      })
        .then((result) => {
          //关闭加载提示
          this.$toast.clear();
          console.log("result ==>", result);

          //如果注册成功
          if (result.data.code == 100) {
            this.show = false;
            //清空注册表单的数据
            for (let key in userInfo) {
              userInfo[key] = "";
            }
          } else {
            //通过注册失败,则提示
            this.$notify({
              type: "warning",
              message: result.data.msg,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("出错了 err ==> ", err);
        });
    },

    //登录
    login() {
      let userInfo = this.userLoginInfo;

      let o = {
        phone: {
          value: userInfo.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "手机号格式不正确",
        },
        password: {
          value: userInfo.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码格式不正确",
        },
      };

      //验证表单
      if (!validForm.valid(o)) {
        return;
      }

      //验证通过
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
        loadingType: "spinner",
      });

      //复制userInfo
      let info = Object.assign({}, userInfo);
      info.appkey = this.appkey;

      //参数序列化
      let data = utils.queryString(info);

      this.axios({
        method: "POST",
        url: "/login",
        data,
      })
        .then((result) => {
          this.$toast.clear();
          console.log("result ==>", result);
          if (result.data.code == 200) {
            localStorage.setItem("CSTK", result.data.token);
            this.$router.push({ name: "Home" });
          } else {
            this.$notify({
              type: "warning",
              message: result.data.msg,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>
